<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="青少年学生体质和生长发育健康工程">
<!--    <title>评估报告</title>-->
    <title>骨龄评估结果</title>

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/css-all.css?v=2"/>
    <link rel="stylesheet" href="css/index.css"/>
    <link rel="stylesheet" href="css/addon.css"/>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="js/prim/edit.js"></script>
    <style>
        .jumbotron{
            background-color: #f1f1f1;
        }
        .row {
            background-color: white;
        }
        .button {
            background-color: #17A2B8;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
        .para-block input[disabled] {
            background-color: white;
        }

        .history-list table{
            width:100%;
            font-family:PingFang-SC-Medium;
            font-weight:bold;
            color:rgba(102,102,102,1);
        }

        .history-list table th{
            font-size: 15px;
            color:rgba(51,51,51,1);
        }

        .history-list table td:nth-child(1){
            text-align: left;
            padding-left: 10px;
        }

        .history-list table td:nth-child(2){
            text-align: center;
        }

        .history-list table td:nth-child(3){
            text-align: center;
            color:#54A8FE;
            border-bottom: 2px solid #E5E5E5;
        }

        .history-list table tr{
            height: 40px;
        }

        table td input{
            display: inline-block;
            border: none;
            outline: none;
            width:80px;
            height:100%;
            padding:10px 0 0 0;
            text-align: center;
        }

    </style>

</head>
<body style="min-width: 1366px">
<div th:switch="${session.user.getKind()}">
    <div th:case="0">
        <div th:include="head::myhead"></div>
    </div>
    <div th:case="1">
        <div th:include="expert/expertHead::expertHead"></div>
    </div>
</div>

<div class="container">
    <div id="export_content" class="right-div">
        <div id="print" class="jumbotron">
            <div class="count-div" style="margin:0">

<!--                <h3 class="para-block" style="clear:left;margin: 20px 20px 20px 0;padding:20px 0 10px 0;text-align: center;width: 100%">儿童生长发育评估报告</h3>-->
                <h3 class="para-block" style="clear:left;margin: 20px 20px 20px 0;padding:20px 0 10px 0;text-align: center;width: 100%">骨龄评估结果</h3>

                <div>
                    <div class="para-block" style="float:left;margin: 0 20px 20px 0;width:calc((100% - 80px)/5);padding:20px 0 10px 0;text-align: center" >
                        <img src="img/name.png" height="24" draggable="false" style="margin-right: 15px"><span style="font-size: 15px;color:#666666;font-weight:600;">姓名</span>
                        <p style="margin-top: 15px;font-weight:bold;font-size: 16px" th:text="${report.getName()}">name</p>
                    </div>
                    <div class="para-block" style="float:left;margin: 0 20px 20px 0;width:calc((100% - 80px)/5);padding:20px 0 10px 0;text-align: center" >
                        <img src="img/gender.png" height="24" draggable="false" style="margin-right: 15px"><span style="font-size: 15px;color:#666666;font-weight:600;">性别</span>
                        <p style="margin-top: 15px;font-weight:bold;font-size: 16px" th:text="${report.getSex()}">gender</p>
                    </div>
                    <div class="para-block" style="float:left;margin: 0 20px 20px 0;width:calc((100% - 80px)/5);padding:20px 0 10px 0;text-align: center" >
                        <img src="img/date.png" height="24" draggable="false" style="margin-right: 15px"><span style="font-size: 15px;color:#666666;font-weight:600;">出生日期</span>
                        <p style="margin-top: 15px;font-weight:bold;font-size: 16px" th:text="${report.getBirth()}">birth</p>
                    </div>
                    <div class="para-block" style="float:left;margin: 0 20px 20px 0;width:calc((100% - 80px)/5);padding:20px 0 10px 0;text-align: center" >
                        <img src="img/age.png" height="24" draggable="false" style="margin-right: 15px"><span style="font-size: 15px;color:#666666;font-weight:600;">年龄</span>
                        <p style="margin-top: 15px;font-weight:bold;font-size: 16px" th:text="${report.getAge()} + '岁'">age</p>
                    </div>
                    <div class="para-block" style="float:left;margin: 0 0 20px 0;width:calc((100% - 80px)/5);padding:20px 0 10px 0;text-align: center" >
                        <img src="img/check.png" height="24" draggable="false" style="margin-right: 15px"><span style="font-size: 15px;color:#666666;font-weight:600;">检查日期</span>
                        <p style="margin-top: 15px;font-weight:bold;font-size: 16px" th:text="${report.getCheckDate()}">check</p>
                    </div>
                </div>

                <div style="width:25%;float:right;height:660px;">
                    <div class="para-block" style="width:100%;height:300px;padding:20px">
                        <div style="margin:0 0 10px 0;">
                            <div style="display: inline-block;width:10px;height:10px;background:linear-gradient(90deg,rgba(59,167,255,1),rgba(105,169,254,1));border-radius:50%;"></div>
                            <span style="color:rgba(102,102,102,1);font-weight:bold;margin-left: 10px">骨龄评价</span>
                        </div>
                        <h6 th:text="'CHN骨龄:' + ${report.getChnBoneAge()} + '岁'">CHN骨龄</h6>
                        <h6 th:text="'TW3骨龄:' + ${report.getTw3BoneAge()} + '岁'">TW3骨龄</h6>
                        <h6 th:text="'TWC骨龄:' + ${report.getTwcBoneAge()} + '岁'">TWC骨龄</h6><br>
                        <h6 th:utext="'发育情况:' + ${report.getWholeAgeGrowth()}">发育情况</h6>
                    </div>
                    <div class="para-block" style="width:100%;height:340px;margin-top: 20px;padding:20px">
                        <div style="margin:0 0 10px 0;">
                            <div style="display: inline-block;width:10px;height:10px;background:linear-gradient(90deg,rgba(59,167,255,1),rgba(105,169,254,1));border-radius:50%;"></div>
                            <span style="color:rgba(102,102,102,1);font-weight:bold;margin-left: 10px">整体发育情况</span>
                        </div>
                        <h6 style="font-size: 15px" th:utext="${report.getCurveChn().getHeightEvaluate()}">整体发育情况</h6>
                    </div>
                    <div class="para-block" style="width:100%;height:340px;margin-top: 20px;padding:20px">
                        <div style="margin:0 0 10px 0;">
                            <div style="display: inline-block;width:10px;height:10px;background:linear-gradient(90deg,rgba(59,167,255,1),rgba(105,169,254,1));border-radius:50%;"></div>
                            <span style="color:rgba(102,102,102,1);font-weight:bold;margin-left: 10px">专家诊断</span>
                        </div>
                        <div id="expertSuggest">
                            <h6 id="suggestionText" style="display: none" th:text="${report.getExpertSuggest()}">专家建议</h6>
                            <h6><textarea id="suggestionTextArea" rows="5" class="textarea-inherit" style="border:0;border-radius:5px;background-color:rgba(241,241,241,.98);height: 200px;padding: 10px;resize: none;width: 100%;display: none" placeholder="请填入您的意见！" th:text="${report.getExpertSuggest()}"></textarea></h6>
                            <h6 id="noSuggestion" style="display: none">专家尚未填写诊断建议</h6>
                        </div><br>
                    </div>
                </div>

                <div style="width:calc(75% - 22px);float:left;margin-bottom: 20px">
                    <div class="para-block" style="height:500px;padding:20px">
                        <div style="margin:0 0 10px 0;">
                            <div style="display: inline-block;width:10px;height:10px;background:linear-gradient(90deg,rgba(59,167,255,1),rgba(105,169,254,1));border-radius:50%;"></div>
                            <span style="color:rgba(102,102,102,1);font-weight:bold;margin-left: 10px">身高曲线图</span>
                            <div id="chartP" style="height:400px;width: 100%;margin: 10px"></div>
                        </div>
                    </div>

                    <div class="para-block" style="margin-top: 20px;height:500px;padding:20px">
                        <div style="margin:0 0 10px 0;">
                            <div style="display: inline-block;width:10px;height:10px;background:linear-gradient(90deg,rgba(59,167,255,1),rgba(105,169,254,1));border-radius:50%;"></div>
                            <span style="color:rgba(102,102,102,1);font-weight:bold;margin-left: 10px">身高曲线图</span>
                            <div id="chartS" style="height:400px;width: 100%;margin: 10px"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="button"class="para-block" style="clear: left;text-align:center;margin-bottom: 20px">
                <button id="exportToPdf" class="button">下载报告</button>
                <button id="submitTask" class="button" style="display: none">提交审核</button>
                <button id="addSuggestion" class="button" style="display: none">提交报告</button>
                <button id="updateSuggestion" class="button" style="display: none">修改报告</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.5.3/jspdf.debug.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script src="/js/prim/result.js"></script>
<script src="/js/prim/chartPercentilteMan.js"></script>
<script src="/js/prim/chartPercentilteWoman.js"></script>
<script src="/js/prim/chartStandardMan.js"></script>
<script src="/js/prim/chartStandardWoman.js"></script>

<script th:inline="javascript">
    var chartP = document.getElementById("chartP");
    var chartS = document.getElementById("chartS");
    var sex = [[${report.getSex()}]];
    var points = [[${report.getCurveChn().getPoints()}]];
    var bp = [[${report.getCurveChn().getBp()}]];
    var bp2 = [[${report.getCurveChn().getBp2()}]];
    var target = [[${report.getCurveChn().getTarget()}]];
    var height = [[${report.getHeight()}]];
    var state = [[${report.getState()}]];
    var age = [[${report.getAge()}]];
    var kind = [[${session.user.getKind()}]];
    var recogStr = [[${recogStr}]];
    var sliceStr = [[${sliceStr}]];

    if (state ==2 && kind == 0) {
        document.getElementById("submitTask").style.display="inline";
    }
    if (state ==4 && kind ==1) {
        document.getElementById("expertSuggest").style.display="inline";
        document.getElementById("addSuggestion").style.display="inline";
        document.getElementById("suggestionTextArea").style.display="inline";
    }
    if (state == 5) {
        document.getElementById("expertSuggest").style.display="inline";
        document.getElementById("suggestionText").style.display="inline";
    }
    if (kind == 1 && state == 5) {
        document.getElementById("updateSuggestion").style.display="inline";
    }
    if (document.getElementById("suggestionText").style.display=="none" && document.getElementById("suggestionTextArea").style.display=="none") {
        document.getElementById("noSuggestion").style.display="inline";
    }


    if (sex == '男') {
        makeChartPercentileMan(chartP, points, bp, bp2);
        makeChartStandardMan(chartS, height, age, target);
    }else {
        makeChartPercentileWoman(chartP, points, bp, bp2);
        makeChartStandardWoman(chartS, height, age,target);
    }


    document.getElementById("updateSuggestion").onclick = function() {
        document.getElementById("suggestionText").style.display="none";
        document.getElementById("expertSuggest").style.display="inline";
        document.getElementById("suggestionTextArea").style.display="inline";

        document.getElementById("addSuggestion").style.display="inline";
        document.getElementById("updateSuggestion").style.display="none";
        document.getElementById("addSuggestion").innerText="提交修改";
        //document.getElementById("updateSuggestion").innerText = '提交修改';
    }

    document.getElementById("addSuggestion").onclick = function () {
        var text = document.getElementById("suggestionTextArea").value;
        $.ajax({
            type: "POST",
            url: "addSuggestion",
            dataType: "json",
            data: {sliceStr : sliceStr, recogStr:recogStr, text:text},
            success: function (data) {
                //var result = JSON.parse(data);
                if (data.code == 1) {
                    alert("" + data.msg);
                    window.location.reload();
                }else {
                    alert("" + data.msg);
                }
            },
            error: function () {
                alert("请求错误");
            }
        });
    }

    var submitTask = document.getElementById("submitTask");
    var sliceStr = [[${report.getSliceId()}]];
    submitTask.onclick = function () {
        $.ajax({
            type: "POST",
            url: "submit",
            dataType: "json",
            data: {sliceStr : sliceStr},
            success: function (data) {
                //var result = JSON.parse(data);
                if (data.code == 1) {
                    alert("提交审核成功");
                }else {
                    alert("提交失败:" + data.msg);
                }
            },
            error: function () {
                alert("请求错误");
            }
        });
    }
</script>
</body>
</html>